<script setup lang="ts">
import { onMounted, ref } from "@vue/runtime-core"

interface Commen {
    title: string
    price: string
    iid: string
    img: string
    finish: boolean
}

const collList = ref<Commen[]>([])
const isEdit = ref(true)

const showOreHide = () => {
    isEdit.value = !isEdit.value
}

const delColl = (id: string) => {
    collList.value = collList.value.filter(i => i.iid != id)
    localStorage.commentArr = JSON.stringify(collList.value)
}


onMounted(() => {
    let arr = localStorage.commentArr
    if (arr) {
        collList.value = JSON.parse(arr)
    }
})
</script>

<template>
    <div>
        <div class="collection-list">
            <div
                style="display: flex; align-items: center; justify-content: space-between; width: 100vw; height: 45px; background: #fff;">
                <div class="top" @click="$router.go(-1)">
                    <van-icon name="arrow-left" />
                </div>
                <div class="edit" v-if="isEdit" @click="showOreHide">
                    编辑
                </div>
                <div class="edit" v-else @click="showOreHide">
                    完成
                </div>
            </div>
            <div v-if="collList">
                <div class="list" v-for="(l, i) in collList" :key="i">
                    <div class="list-l">
                        <img :src="l.img">
                    </div>
                    <div class="l-box" @click="$router.push({ path: '/merchandise', query: { itemId: l.iid } })">
                        <div class=" list-r">
                            <div class="list-title">
                                {{ l.title }}
                            </div>
                            <div class="user">
                                {{ l.price }}
                            </div>
                        </div>
                    </div>
                    <div class="ipt" v-if="!isEdit" @click="delColl(l.iid)">
                        <img src="@/assets/img/shanchu.png">
                    </div>
                </div>

            </div>

            <div class="guangguang" v-else>
                <div class="no">
                    暂时没有收藏的商品
                </div>
                <div class="go">
                    去逛逛
                </div>
            </div>
            <div class="end">
                - End -
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.ipt {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-right: 3px;

    img {
        width: 100%;
        height: 100%;
    }
}

.edit {
    margin-top: 5px;
    margin-right: 5px;
    text-align: right;
}

.list {
    display: flex;
    margin: 15px auto;
    width: 94vw;

    .list-l {
        flex: 0 0 141px;
        width: 147px;
        height: 90px;
        border-radius: 6px;
        overflow: hidden;

        img {
            width: 100%;
            // height: 100%;
        }
    }

    .list-r {
        width: 145px;
        margin-left: 5px;

        .list-title {
            width: 150px;
            margin-bottom: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .user {
            margin-bottom: 10px;
            font-size: 12px;
            color: #666;
        }

        .list-num {
            font-size: 12px;
            color: #666;
        }
    }
}

.end {
    width: 94vw;
    color: #ccc;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
}

.guangguang {
    margin-top: 100px;
    margin-bottom: 25px;
    text-align: center;

    .go {
        width: 60px;
        height: 30px;
        margin: 0 auto;
        background-color: #fc0;
        line-height: 30px;
        color: #fff;
        margin-top: 10px;
        border-radius: 4px;
    }
}
</style>